<template>
	<div class="topbar">
		<van-nav-bar fixed left-text="返回" left-arrow @click-left="back">
		  <template #right>
		    <div>
		      <van-search
		        v-model="searchKey"
		        placeholder="请输入搜索关键词"
						@search="search"
						@clear="clear"
		      />
		    </div>
		  </template>
		</van-nav-bar>
	</div>
</template>

<script>
	import bus from '@/utils/eventBus.js'
	export default {
		name: 'topbar',
		data () {
			return {
				searchKey: ''
			}
		},
		methods: {
			search (value) {
				bus.$emit('search', this.searchKey)
			},
			clear () {
				bus.$emit('clear')
			},
			back () {
				this.$router.back(-1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topbar{
		height: 46px;
		/deep/ .van-nav-bar__right{
			left: 80px;
			/deep/ .van-search{
				padding: 0;
				border-radius: 20px;
				overflow: hidden;
				width: 260px;
			}
		}
	}
</style>